<template>
  <div class="commission-overview">
    <!-- 佣金概览卡片 -->
    <div class="commission-overview__cards">
      <div class="commission-card">
        <div class="commission-card__icon commission-card__icon--total">
          <i class="fas fa-wallet"></i>
        </div>
        <div class="commission-card__content">
          <div class="commission-card__title">累计佣金总额</div>
          <div class="commission-card__value">¥{{ formatNumber(overviewData.totalCommission) }}</div>
        </div>
      </div>

      <div class="commission-card">
        <div class="commission-card__icon commission-card__icon--month">
          <i class="fas fa-calendar-alt"></i>
        </div>
        <div class="commission-card__content">
          <div class="commission-card__title">本月佣金总额</div>
          <div class="commission-card__value">¥{{ formatNumber(overviewData.currentMonthCommission) }}</div>
        </div>
      </div>

      <div class="commission-card">
        <div class="commission-card__icon commission-card__icon--pending">
          <i class="fas fa-hourglass-half"></i>
        </div>
        <div class="commission-card__content">
          <div class="commission-card__title">待结算佣金</div>
          <div class="commission-card__value">¥{{ formatNumber(overviewData.pendingCommission) }}</div>
        </div>
      </div>

      <div class="commission-card">
        <div class="commission-card__icon commission-card__icon--available">
          <i class="fas fa-money-bill-wave"></i>
        </div>
        <div class="commission-card__content">
          <div class="commission-card__title">可提现佣金</div>
          <div class="commission-card__value">¥{{ formatNumber(overviewData.availableCommission) }}</div>
        </div>
      </div>

      <div class="commission-card">
        <div class="commission-card__icon commission-card__icon--settled">
          <i class="fas fa-check-circle"></i>
        </div>
        <div class="commission-card__content">
          <div class="commission-card__title">已提现佣金</div>
          <div class="commission-card__value">¥{{ formatNumber(overviewData.settledCommission) }}</div>
        </div>
      </div>
    </div>

    <!-- 图表和排行榜区域 -->
    <div class="commission-overview__charts">
      <!-- 佣金趋势图表 -->
      <div class="chart-card">
        <div class="chart-card__header">
          <h2 class="chart-card__title">佣金趋势</h2>
          <div class="chart-card__subtitle">近6个月佣金趋势</div>
        </div>
        <div class="chart-card__content">
          <CommissionTrendChart :chartData="trendData" />
        </div>
      </div>

      <!-- 佣金构成饼图 -->
      <div class="chart-card">
        <div class="chart-card__header">
          <h2 class="chart-card__title">佣金构成</h2>
          <div class="chart-card__subtitle">不同类型佣金占比</div>
        </div>
        <div class="chart-card__content">
          <CommissionCompositionChart :chartData="compositionData" />
        </div>
      </div>

      <!-- 分销商佣金排行榜 -->
      <div class="chart-card chart-card--full">
        <div class="chart-card__header">
          <h2 class="chart-card__title">分销商佣金排行</h2>
          <div class="chart-card__subtitle">佣金最高的前10个分销商</div>
        </div>
        <div class="chart-card__content">
          <DistributorRankingTable :distributors="rankingData" />
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineComponent } from 'vue';
import { 
  generateCommissionOverview, 
  generateCommissionTrend, 
  generateCommissionComposition, 
  generateDistributorCommissionRanking 
} from '@/utils/agentMock';
import CommissionTrendChart from '@/components/agent/charts/CommissionTrendChart.vue';
import CommissionCompositionChart from '@/components/agent/charts/CommissionCompositionChart.vue';
import DistributorRankingTable from '@/components/agent/commission/DistributorRankingTable.vue';

// 数据模型
const overviewData = ref({
  totalCommission: 0,
  currentMonthCommission: 0,
  pendingCommission: 0,
  availableCommission: 0,
  settledCommission: 0
});
const trendData = ref([]);
const compositionData = ref([]);
const rankingData = ref([]);

// 格式化数字（千分位）
const formatNumber = (num: number) => {
  return num.toLocaleString('zh-CN', { minimumFractionDigits: 2, maximumFractionDigits: 2 });
};

// 获取数据
const fetchData = () => {
  // 使用模拟数据
  overviewData.value = generateCommissionOverview();
  trendData.value = generateCommissionTrend(6);
  compositionData.value = generateCommissionComposition();
  rankingData.value = generateDistributorCommissionRanking(10);
};

onMounted(() => {
  fetchData();
});
</script>

<style lang="scss" scoped>
.commission-overview {
  &__cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 16px;
    margin-bottom: 24px;
  }

  &__charts {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
  }
}

.commission-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 16px;
  display: flex;
  align-items: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.3s, box-shadow 0.3s;

  &:hover {
    transform: translateY(-5px);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
  }

  &__icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 16px;
    
    i {
      font-size: 20px;
      color: #fff;
    }

    &--total {
      background-color: #4CAF50;
    }

    &--month {
      background-color: #2196F3;
    }

    &--pending {
      background-color: #FF9800;
    }

    &--available {
      background-color: #9C27B0;
    }

    &--settled {
      background-color: #607D8B;
    }
  }

  &__content {
    flex: 1;
  }

  &__title {
    font-size: 14px;
    color: #666;
    margin-bottom: 6px;
  }

  &__value {
    font-size: 20px;
    font-weight: 600;
    color: #333;
  }
}

.chart-card {
  background-color: #fff;
  border-radius: 8px;
  padding: 20px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
  margin-bottom: 16px;

  &--full {
    grid-column: 1 / -1;
  }

  &__header {
    margin-bottom: 16px;
  }

  &__title {
    font-size: 18px;
    font-weight: 600;
    color: #333;
    margin-bottom: 4px;
  }

  &__subtitle {
    font-size: 14px;
    color: #888;
  }

  &__content {
    height: 300px;
  }
}

@media (max-width: 768px) {
  .commission-overview {
    &__charts {
      grid-template-columns: 1fr;
    }
  }
}
</style> 